doctype html
head
    meta(charset='utf-8')
    style.
        .container {
            width: 80%;
            margin: auto;
        }

        form {
            border: 1px solid grey;
            padding: 20px;
            width: 50%;
        }

        img {
            max-width: 95%;
        }

        .center {
            display: table;
            margin: auto;
        }

        .col-lg-1 {
            width: 10%;
            float: left;
        }

        .col-lg-6 {
            width: 50%;
            float: left;
        }

        .row {
            clear: both;
        }

        .element01 {
            width: 100%;
        }

        .element02 {
            color: #00f;
            background-color: #ddd;
        }

        .element03 {
            color: #00f;
        }

        .element04 {
            background-color: #ddd;
        }

        .element05 {
            border: 2px dotted #00f;
        }

        .element06 {
            border: none;
        }

        .element07 {
            font-family: "Courier New", Courier;
        }

        .element08 {
            width: 4em;
            height: 4em;
        }

        .element09 {
            font-size: 0.5em;
        }

        .element10 {
            font-weight: bold;
        }

        .element11 {
            padding: 1em;
        }

        .element12 {
            margin: 1em;
        }

        .element13 {
            text-align: right;
        }

        .element14 {
            line-height: 2em;
        }

        select {
            width: 50%;
            height: 34px;
        }
body
    .container
        .row
            include main.jade
        .row
            form.center
                h2 Select几种样式集合。
                h3 当前浏览器:
                select.element01(type='submit')
                    option element01 : width:100%;
                    option element01 : width:100%;
                br
                select.element02(type='submit')
                    option element02 : color:blue;background-color: #ddd;
                    option element02 : color:blue;background-color: #ddd;
                br
                select.element03(type='submit')
                    option element03 : color:#00f;
                    option element03 : color:#00f;
                br
                select.element04(type='submit')
                    option element04 : background-color: #ddd;
                    option element04 : background-color: #ddd;
                br
                select.element05(type='submit')
                    option element05 : border: 2px dotted #00f;
                    option element05 : border: 2px dotted #00f;
                br
                select.element06(type='submit')
                    option element06 : border: none;
                    option element06 : border: none;
                br
                select.element07(type='submit')
                    option element07 : font-family: "Courier New", Courier;
                    option element07 : font-family: "Courier New", Courier;
                br
                select.element08(type='submit')
                    option width:4em; height:4em;
                    option width:4em; height:4em;
                br
                select.element09(type='submit')
                    option element09 : font-size: 0.5em;
                    option element09 : font-size: 0.5em;
                br
                select.element10(type='submit')
                    option element10 : font-weight: bold;
                    option element10 : font-weight: bold;
                br
                select.element11(type='submit')
                    option element11 : padding: 1em;
                    option element11 : padding: 1em;
                br
                select.element12(type='submit')
                    option element12 : margin: 1em;
                    option element12 : margin: 1em;
                br
                select.element13(type='submit')
                    option element13 : text-align: right;
                    option element13 : text-align: right;
                br
                select.element14(type='submit')
                    option element14 : line-height: 2em;
                    option element14 : line-height: 2em;
        br
        br
        br
        .row
            .col-lg-6
                .dropdown-left
                    select
                        option(value='chrome40') chrome 40
                        option(value='firefox36') firefox 36
                        option(value='opera28') opera 28
                        option(value='ie7') ie 7
                        option(value='ie8') ie 8
                        option(value='ie9') ie 9
                        option(value='ie10') ie 10
                        option(value='ie11') ie 11
                    .content
                        p chrome 40:
                        img(src='img/select/chrome40.png')

            .col-lg-6.center
                .dropdown-right
                    select
                        option(value='chrome40') chrome 40
                        option(value='firefox36') firefox 36
                        option(value='opera28') opera 28
                        option(value='ie7') ie 7
                        option(value='ie8') ie 8
                        option(value='ie9') ie 9
                        option(value='ie10') ie 10
                        option(value='ie11') ie 11
                    .content
                        p chrome 40:
                        img(src='img/select/chrome40.png')

    script(src='../bower_components/jquery/dist/jquery.js')
    script.
        $('select').on('change', function () {
            var name = $(this).find("option:selected").val();
            var $content = $('.content', $(this).parent())
            $('p', $content).html(name);
            $('img', $content).attr('src', 'img/select/' + name + '.png');
        })

        $('.selectEle').on('click', function () {
            var name = $(this).attr('data');
            location.href = location.href.substring(0, location.href.lastIndexOf("/") + 1) + name + ".html";
        })
